<template>
<view class="">
 <view class="top_search">
    <MySearch @click.native="goSearch"></MySearch>
 </view>
  <view class="scroll_container">
    <scroll-view scroll-y="true"  class="one_cate">
      <view class="left_scroll_item" v-for="(item,index) in cateList" @click="saveChild(item,index)" :key="index" :class="index===activeIndex?'active':''">{{item.cat_name}}</view>
    </scroll-view>
    <scroll-view scroll-y="true"  class="two_cate" :scroll-top="scroll_top">
      <view v-for="(item,index) in cateChild" :key="index" class="right_scroll_item" >
        <text>/{{item.cat_name}}/</text>
        <view class="right_scroll_item_bottom">
          <view class="right_scroll_item_bottom_item" @click="getGoods(i)" v-for="(i,inx) in item.children" :key="inx">
            <image :src="i.cat_icon" mode=""></image>
            <text>{{i.cat_name}}</text>
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
</view>
</template>

<script>
    import getTabBarBadge from "../../mixins/getTabBarBadge.js" 
  export default {
    data() {
      return {
        cateList:[],
        cateChild:[],
        activeIndex:0,
        scroll_top:0
      };
    },
     mixins:[getTabBarBadge],
    onLoad() {
      this.getCateList()
      
    }, 
    methods:{
      goSearch(){
        uni.navigateTo({
          url:"/subpkg/Search/Search"
        })
      },
      async getCateList(){
        let {data:res}=await uni.$http.get("/api/public/v1/categories")
        if(res.meta.status!==200) return uni.$showMsg("分类列表获取失败！")
        this.cateList=res.message
        this.saveChild(this.cateList[0],0)
        
      },
      saveChild(item,index){
        this.activeIndex=index,
        this.cateChild=item.children
        this.scroll_top=Math.random(0,1)
      },
      // 跳转到商品列表页面
      getGoods(item){
        console.log(item);
        uni.navigateTo({
          url:"/subpkg/goods_list/goods_list?cid="+item.cat_id
        })
      }
    }
  }
</script>

<style lang="scss">
.scroll_container{
  .top_search{
    position: sticky;
    top: 0;
    z-index: 999;
  }
  .one_cate,.two_cate{
    height: calc(100vh - 150rpx);
  }
  display: flex;
  .one_cate{
    width: 120px;
    .left_scroll_item{
      line-height: 60px;
      background-color: #f7f7f7;
      text-align: center;
    }
    & .active{
      position: relative;
      background-color: #fff;
      &::before{
        content: "";
        display: block;
        width: 4px;
        height: 40px;
        background-color: #c00000;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        left: 0;
      }
    }
  }
  .two_cate{
    .right_scroll_item{
      padding-top: 20rpx;
      display: flex;
      flex-direction: column;
      &>text{
        text-align: center;
        font-size: 14px;
        font-weight: bold;
      }
      .right_scroll_item_bottom{
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        .right_scroll_item_bottom_item{
          display: flex;
          width: 31%;
          margin-top: 20rpx;
          height: 16vh;
          flex-direction: column;
          align-items: center;
          image{
            width: 85%!important;
          }
          text{
            font-size: 14px;
            color: #666;
          }
        }
      }
    }
  }
}
</style>
